<template>
  <div class="container">
    <div class="container-head flex_btw">
      <div class="head-title flex_x">
        <img class="head-icon" src="@/assets/images/data.png" alt="" />
        <span>角色配置</span>
      </div>
      <div class="flex_x">
        <el-input
          class="mr20"
          v-model="params"
          style="width: 240px"
          placeholder="请输入编号或名称"
        >
        </el-input>
        <el-button type="primary">搜索</el-button>
        <el-button type="primary">模板下载</el-button>
        <el-button type="primary">导入</el-button>
        <el-button
          type="primary"
          @click="
            router.push({
              name: 'roleAdd',
            })
          "
          >新增</el-button
        >
        <el-button type="danger">删除</el-button>
      </div>
    </div>
    <div class="list_con" v-loading="loading">
      <el-table
        :data="tableData"
        v-resize="{ bottomOffset: 120 }"
        ref="tableRef"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        header-cell-class-name="table_head_s"
        cell-class-name="table_cell_s"
      >
        <el-table-column type="selection" width="100" />
        <el-table-column prop="date" label="角色名"> </el-table-column>
        <el-table-column prop="name" label="级别"> </el-table-column>
        <el-table-column prop="address" label="说明"> </el-table-column>
        <el-table-column prop="address" label="修改人"> </el-table-column>
        <el-table-column prop="address" label="修改时间"> </el-table-column>
        <el-table-column prop="address" label="状态" width="150">
          <template #default="scope">
            <el-switch v-model="tableData.date" size="large" />
          </template>
        </el-table-column>
        <el-table-column prop="address" label="操作" width="150">
          <template #default="scope">
            <el-button type="primary" link>编辑</el-button>
            <el-button type="primary" link>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="list_page flex_c">
        <el-pagination
          v-model:current-page="pagination.current"
          v-model:page-size="pagination.size"
          :page-sizes="pagination.sizeOption"
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          :pager-count="5"
          @size-change="pagination.onSizeChange"
          @current-change="pagination.onCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from "vue-router";
import dialogAdd from "./components/add.vue";
import { login } from "@/api/common";
import { useTable } from "@/hooks/pageList";


const router = useRouter();
const isAdd = ref(false);
const params = ref("");
const [tableData, refresh, loading, pagination] = useTable(
  login,
  {},
  {
    immediate: true,
  }
);
const multipleTableRef = ref();
const multipleSelection = ref<User[]>([]);
const toggleSelection = (rows?: User[]) => {
  if (rows) {
    rows.forEach((row) => {
      multipleTableRef.value!.toggleRowSelection(row, undefined);
    });
  } else {
    multipleTableRef.value!.clearSelection();
  }
};
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val;
};
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
</script>
